<template>
  <!-- 登录表单 -->
  <view class="tab-login">
    <view class="card">
      <view class="logo-img">
        <image class="pic" src="/src/static/images/logo.jpg" mode="aspectFit" />
      </view>
      <view class="login-form">
        <uni-forms ref="loginForm" :model="loginFromData" :rules="loginRules">
          <uni-forms-item name="username">
            <uni-easyinput
              label-width="0"
              v-model="loginFromData.username"
              placeholder="请输入用户名"
              maxlength="20"
            />
          </uni-forms-item>
          <uni-forms-item label-width="0" name="password">
            <uni-easyinput
              v-model="loginFromData.password"
              placeholder="请输入密码"
              type="password"
            />
          </uni-forms-item>
        </uni-forms>
        <view class="login-button" @click="onSubmit">登录</view>
      </view>
      <view class="tip">
        <text
          >如果连接不上服务器，可以选择离线操作；\n在有网络的情况下可以把操作结果数据回传至服务器。</text
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { postLoginAPI } from '@/api/apis'
import { useUserStore } from '@/stores/'
const userStore = useUserStore()

const loginForm = ref(null)
// 登录表单数据
const loginFromData = ref({
  username: '',
  password: '',
})
// 登录表单验证规则
const loginRules = ref({
  username: {
    rules: [
      {
        required: true,
        errorMessage: '用户名不能为空',
      },
    ],
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '密码不能为空',
      },
    ],
  },
})
// 校验
function onSubmit() {
  loginForm.value
    .validate()
    .then(async () => {
      onLogin()
    })
    .catch((err) => {
      console.log('err', err)
    })
}
// 登录
async function onLogin() {
  // wx.setStorageSync('actionType', 'online')
  let res = await postLoginAPI(loginFromData.value)
  // console.log(res)
  const userInfo = {
    company_id: res.company_id,
    env_company: res.env_company,
    uid: res.uid,
    username: res.username,
    name: res.name,
    //数据中的组织(company_id)必须在下面登录用户所属组织的列表内才能查看，即组织隔离
    companies: Object.values(res.user_companies.allowed_companies).map((v) => v.id),
    user_context: res.user_context,
  }
  userStore.setUserInfo(userInfo)
  userStore.setActionType('online')
  uni.navigateBack()
  uni.showToast({
    icon: 'success',
    title: '登录成功',
  })
}
</script>

<style lang="scss" scoped>
.tab-login {
  padding: 20px;
  height: 100vh;
  // height: calc(100vh - 48px - var(--window-top));
  // height: calc(100vh - 48px - var(--window-top) - constant(safe-area-inset-bottom));
  // height: calc(100vh - 48px - var(--window-top) - env(safe-area-inset-bottom));
  background: url('@/static/images/login_bg.jpg') no-repeat top center/cover;
  .card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    background: $my-background-color;
    opacity: 0.95;
    .logo-img {
      width: 100%;
      height: 80px;
      margin-bottom: 32px;
    }
    .login-form {
      :deep(.is-input-border) {
        height: 40px;
        overflow: hidden;
        background: transparent !important;
        box-shadow: 0 4px 15px #aaa;
        .uni-easyinput__content-input {
          background: none !important;
        }
      }
      :deep(.is-focused) {
        border-color: $my-border-color-light !important;
        .uni-icons {
          color: $text-font-color-3 !important;
        }
      }
      .login-button {
        // box-shadow: 0 4px 15px #999;
        background: linear-gradient(90deg, #174a8c 0%, #0d47a1 100%);
        color: white;
        border-radius: 14px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 600;
        margin-top: 10px;
        box-shadow: 0 6px 15px rgba(26, 115, 232, 0.3);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 200%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          transition: all 0.3s;
        }

        &:active {
          transform: translateY(3px);
          box-shadow: 0 3px 8px rgba(26, 115, 232, 0.3);

          &::after {
            left: 100%;
          }
        }
      }
    }
    .tip {
      margin-top: 20px;
      font-size: $my-text-font-size-sm;
      color: $text-font-color-3;
    }
  }
}
</style>
